<template>
  <view class="inquiry-page">
    
    <view class="form-container">
      <view class="form-content">
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">询价对象</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.inquiryObject" 
            placeholder="请输入询价对象"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">有效期</text>
            <text class="required">*</text>
          </view>
          <picker 
            mode="date" 
            :value="formData.validityPeriod" 
            @change="onValidityPeriodChange"
          >
            <view class="picker-input">
              <text class="picker-text">{{ formData.validityPeriod || '请选择有效期' }}</text>
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">详细描述</text>
            <text class="required">*</text>
          </view>
          <textarea 
            class="form-textarea" 
            v-model="formData.description" 
            placeholder="请详细描述您的需求"
            maxlength="500"
          />
          <view class="char-count">{{ formData.description.length }}/500</view>
        </view>

        <view class="form-group">
          <view class="input-label">
            <text class="label-text">采购数量</text>
          </view>
          <input 
            class="form-input" 
            v-model.number="formData.quantity" 
            placeholder="请输入采购数量（可选）"
            type="number"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">联系人</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.contactPerson" 
            placeholder="请输入联系人姓名"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">邮箱</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.email" 
            placeholder="请输入邮箱地址"
            type="email"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">电话</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.phone" 
            placeholder="请输入联系电话"
            type="number"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">微信</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.wechat" 
            placeholder="请输入微信号"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">公司名称</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.companyName" 
            placeholder="请输入公司名称"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">所属行业</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.industry" 
            placeholder="请输入所属行业"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">所在城市</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.city" 
            placeholder="请输入所在城市"
          />
        </view>

        <!-- 配图/附件上传（多图） -->
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">配图/附件</text>
            <text class="optional">(最多6张，选填)</text>
          </view>
          <view class="uploader">
            <view class="uploader-list">
              <view class="uploader-item" v-for="(img, idx) in formData.images" :key="idx">
                <image :src="img" class="uploader-image" mode="aspectFill" />
                <view class="uploader-remove" @click="removeImage(idx)">×</view>
              </view>
              <view class="uploader-add" v-if="formData.images.length < maxImages" @click="chooseImages">
                <text class="uploader-add-icon">＋</text>
                <text class="uploader-add-text">添加图片</text>
              </view>
            </view>
            <text class="uploader-tip">支持 jpg/png/webp，单张≤5MB</text>
          </view>
        </view>
      </view>
      
      <view class="form-actions">
        <view class="submit-btn" @click="handleSubmit" :class="{ 'disabled': !canSubmit }">
          <text class="submit-text">提交询价</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InquiryPage',
  data() {
    return {
      productId: '',
      formData: {
        inquiryObject: '',
        validityPeriod: '',
        description: '',
        quantity: '',
        contactPerson: '',
        email: '',
        phone: '',
        wechat: '',
        companyName: '',
        industry: '',
        city: '',
        images: []
      },
      maxImages: 6
    }
  },
  onLoad(options) {
    this.productId = options.productId || ''
    if (this.productId) {
      this.formData.inquiryObject = `产品ID: ${this.productId}`
    }
  },
  computed: {
    canSubmit() {
      return this.formData.inquiryObject && 
             this.formData.validityPeriod && 
             this.formData.description && 
             (this.formData.quantity === '' || Number(this.formData.quantity) > 0) &&
             this.formData.contactPerson && 
             this.formData.email && 
             this.formData.phone && 
             this.formData.companyName &&
             this.validateEmail(this.formData.email) &&
             this.validatePhone(this.formData.phone)
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return re.test(email)
    },
    validatePhone(phone) {
      const re = /^1[3-9]\d{9}$/
      return re.test(phone)
    },
    onValidityPeriodChange(e) {
      this.formData.validityPeriod = e.detail.value
    },
    async chooseImages() {
      try {
        const count = Math.min(this.maxImages - this.formData.images.length, 3)
        if (count <= 0) return
        
        const res = await uni.chooseImage({
          count: count,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera']
        })
        
        if (res.tempFilePaths && res.tempFilePaths.length) {
          this.formData.images = this.formData.images.concat(res.tempFilePaths).slice(0, this.maxImages)
        }
      } catch (err) {
        console.error('选择图片失败:', err)
        uni.showToast({ title: '选择图片失败', icon: 'none' })
      }
    },
    removeImage(index) {
      this.formData.images.splice(index, 1)
    },
    
    async handleSubmit() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({ title: '提交中...' })
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('提交询价失败:', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inquiry-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}


.nav-placeholder {
  width: 60rpx;
}

.form-container {
  background: #fff;
  margin: 20rpx;
  margin-top: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.form-content {
  padding: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.input-label {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.label-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.required {
  color: #dd524d;
  margin-left: 5rpx;
}

.optional {
  color: #999;
  margin-left: 10rpx;
  font-size: 24rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #3cc51f;
}

.picker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  background: #fff;
  box-sizing: border-box;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 28rpx;
  color: #999;
}

.uploader {
  .uploader-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }
  .uploader-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    overflow: hidden;
    background: #f8f8f8;
  }
  .uploader-image {
    width: 100%;
    height: 100%;
  }
  .uploader-remove {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
  }
  .uploader-add {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #e5e5e5;
    border-radius: 12rpx;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
  }
  .uploader-add-icon {
    font-size: 48rpx;
    line-height: 1;
    margin-bottom: 10rpx;
  }
  .uploader-add-text {
    font-size: 24rpx;
  }
  .uploader-tip {
    display: block;
    margin-top: 12rpx;
    font-size: 22rpx;
    color: #999;
  }
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  resize: none;
  box-sizing: border-box;
}

.form-textarea:focus {
  border-color: #3cc51f;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.form-actions {
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background: #3cc51f;
  color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn.disabled {
  background: #ccc;
  color: #999;
}

.submit-text {
  font-size: 32rpx;
  font-weight: bold;
  color: inherit;
}
</style>
